<template>
  <!-- 轮播图 -->
  <div class="banner">
    <swiper
      class="swiper"
      @mouseenter.native="stopSwiper"
      @mouseleave.native="startSwiper"
      :options="swiperOption"
    >
      <swiper-slide class="slide-1"
        ><img src="../../public/img/swiper1.jpg" alt=""
      /></swiper-slide>
      <swiper-slide class="slide-2"
        ><img src="../../public/img/swiper2.jpg" alt=""
      /></swiper-slide>
      <swiper-slide class="slide-3"
        ><img src="../../public/img/swiper3.jpg" alt=""
      /></swiper-slide>
      <div
        class="swiper-pagination swiper-pagination-white"
        slot="pagination"
      ></div>
      <div
        class="swiper-button-prev swiper-button-white"
        slot="button-prev"
      ></div>
      <div
        class="swiper-button-next swiper-button-white"
        slot="button-next"
      ></div>
      <ul class="banner_nav">
        <li>
          <div style="background-img"></div>
          潮流女装
        </li>
        <li>美容护肤</li>
        <li>时尚配饰</li>
        <li>鞋子箱包</li>
        <li>美食特产</li>
        <li>精品男装</li>
        <li>数码家电</li>
        <li>家具日常</li>
        <li>母婴用品</li>
        <li>综合商品</li>
      </ul>
      <div class="banner_login">
        <img src="../../public/img/index_unlogin_head.png" alt="" />
        <span class="slog">Hi,欢迎来到返赞</span>
        <span class="lo">商家登录</span>
        <span class="re">商家注册</span>
      </div>
      <div class="banner_notice"></div>
    </swiper>

    <img src="" alt="" />
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
export default {
  name: "swiper-example-fade-effect",
  title: "Fade effect",
  components: {
    Swiper,
    SwiperSlide,
  },
  methods: {
    // stopSwiper() {
    //   // console.log('stopSwiper');
    //   this.$refs.mySwiper.$swiper.autoplay.stop();
    // },
    // startSwiper() {
    //   console.log($swiper);
    //   this.$refs.mySwiper.$swiper.autoplay.start();
    // },
  },
  data() {
    return {
      swiperOption: {
        autoplay: true,
        spaceBetween: 30,
        effect: "fade",
        loop: true,
        clickable: true,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        autoplay: {
          delay: 2000, //间隔时间
          disableOnInteraction: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
};
</script>
<style lang="scss" scoped>
.banner {
  max-width: 1920px;
  border: 1px solid black;
  height: auto;
  margin: 0 auto;
  .swiper {
    width: 1920px;
    text-align: center;
    border: 1px solid black;
    position: relative;
    img {
      width: 100%;
    }
    .banner_nav {
      border: 1px solid black;
      width: 175px;
      height: 430px;
      background-color: rgba(255, 255, 255, 0.85);
      position: absolute;
      top: 20px;
      left: 170px;
      z-index: 1;
    }
    .banner_login {
      border: 1px solid black;
      position: absolute;
      z-index: 1;
      top: 20px;
      left: 1160px;
      width: 195px;
      height: 165px;
      background-color: rgba(255, 255, 255, 0.85);
      img {
        margin: 0 auto;
        display: block;
        width: 70px;
        margin-top: 10px;
      }
      .slog {
        display: block;
        font-size: 12px;
        margin-top: 10px;
      }
      
    }
    .banner_notice {
      border: 1px solid black;
      width: 195px;
      height: 245px;
      position: absolute;
      z-index: 1;
      background-color: rgba(255, 255, 255, 0.85);
      margin-top: 205px;
      left: 1160px;
    }
  }
}
</style>
